<template>
    <div class="login">
        <el-card class="box-card">
            <div class="card-header">
                <span> 注册界面 </span>
            </div>
            <el-form ref="frmRef" label-position="center" label-width="100px" :model="stufrm" :rules="rules"
                style="max-width: 460px">
                <el-form-item label="用户名" prop="stufrm.username">
                    <el-input v-model="stufrm.username" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" prop="stufrm.password">

                    <el-input v-model="stufrm.password" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item>

                    <el-button type="primary" @click="submitForm">用户注册</el-button>
                    <el-button @click="resetForm">咨询师注册</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>  
    
<script>
import { ElMessage } from 'element-plus'
export default {

    data() {
        return {
            stufrm: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
        submitForm() {
            this.$refs.frmRef.validate((valid) => {
                console.log(valid);
                if (valid) {
                    console.log("登录成功！");
                    localStorage.setItem("userPower", 0)
                    //访问数据库

                    ElMessage({
                        showClose: true,
                        message: '登录成功！',
                        type: 'success',
                    })
                    this.$router.push({
                        path: "/main"
                    })
                } else {
                    console.log("登录失败！");
                    ElMessage({
                        showClose: true,
                        message: '登录失败！',
                        type: 'warning',
                    })
                }
            })
        },

        // resetForm() {    
        //     // 注册操作...   
        //     // 在这里添加你的注册代码，如果成功，可以显示消息提示。  
        //     this.$message({  
        //         message: '注册成功',  
        //         type: 'success'  
        //     });  
        // }    
    }
}    
</script>
    
<style scoped>  .login {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-image: url('your-image-url');
      background-size: cover;
  }

  .card-header {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #333;
      padding: 10px;
  }

  .card-header span {
      color: white;
      font-size: 24px;
  }

  .el-form {
      max-width: 500px;
      margin: 20px auto;
      padding: 20px;
      background-color: #fff;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }

  .el-form label {
      font-size: 14px;
      color: #333;
  }

  .el-form input {
      border-radius: 4px;
      border: 1px solid #ccc;
      padding: 10px;
      font-size: 14px;
  }

  .el-button {
      background-color: #409eff;
      border-color: #409eff;
      color: #fff;
      padding: 10px 20px;
      border-radius: 4px;
      margin-top: 10px;
  }
</style>